<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="header_container">
          <div class="title_box">
            <img src="@/assets/logo2.png" alt="" />
            <p>电商后台管理系统</p>
          </div>
          <div class="exit_box">
            <el-button type="info" @click="exit">退出</el-button>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '50px' : '200px'">
          <div class="shrinkage" @click="shrinkage">
            <div>| | |</div>
          </div>
          <el-menu
            default-active="/users"
            class="el-menu-vertical-demo"
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409EFF"
            :collapse="false"
            :unique-opened="true"
            :collapse-transition="false"
            router
          >
            <el-submenu
              :index="item.id.toString()"
              v-for="item in userlist"
              :key="item.id"
            >
              <template slot="title">
                <i :class="iconsObj[item.id]" class="icon"></i>
                <span class="content">{{ item.authName }}</span>
              </template>
              <el-menu-item-group
                v-for="(el, indexs) in item.children"
                :key="indexs"
              >
                <el-menu-item :index="el.path">
                  <i class="el-icon-menu"></i>
                  <span class="content"> {{ el.authName }}</span></el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <crue></crue>
          <div class="list">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { menus } from "../http/api";
import crue from "../components/crumb/crumb";
export default {
  data() {
    return {
      userlist: [],
      isCollapse: false,
      iconsObj: {
        125: "iconfont icon-user",
        103: "iconfont icon-tijikongjian",
        101: "iconfont icon-shangpin",
        102: "iconfont icon-danju",
        145: "iconfont icon-baobiao",
      },
    };
  },
  created() {
    // console.log(this.iconsObj);
    menus().then((res) => {
      // console.log(res);
      this.userlist = res;
    });
  },
  methods: {
    exit() {
      this.$confirm("您确定要退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sessionStorage.removeItem("token");
          this.$router.push("/");
          this.$message({
            type: "success",
            message: "退出成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    shrinkage() {
      this.isCollapse = !this.isCollapse;
    },
  },
  components: {
    crue,
  },
};
</script>
<style lang="scss" scoped>
.el-header,
.el-footer {
  background-color: #373d41;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.header_container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .title_box {
    width: 30%;
    height: 100%;
    // background-color: pink;
    display: flex;
    img {
      width: 61px;
      height: 56px;
    }
    p {
      font-size: 22px;
      margin-left: 14px;
      color: #fff;
    }
  }
  .exit_box {
    width: 5%;
    height: 100%;
    // background-color: skyblue;
    // display: flex;
    // justify-content: flex-end;
  }
}
.el-aside {
  background-color: #333744;
  color: #333;
  text-align: center;
  // line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  // line-height: 160px;
  height: 92vh;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.shrinkage {
  width: 100%;
  height: 20px;
  background-color: #4a5064;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  div {
    line-height: 20px;
  }
}
.list {
  margin-top: 20px;
}
.icon {
  margin-right: 10px;
}
.content {
  margin-right: 80px;
  font-size: 12px;
}
.el-icon-menu {
  color: #909399;
  vertical-align: middle;
}
</style>
